<template>
  <div id="app" class="container">
    <div class="row">
      <div class="col-sm-5">
        <h4>
          <i class="el-icon-user-solid"/>欢迎{{ username }}
        </h4>
      </div>
      <div class="col-sm-7">
        <h4>学生信息管理系统</h4>
      </div>

    </div>

    <div style="margin-top: 30px">
      <el-tabs
        tab-position="left"
        style="height: 600px"
      >
        <el-tab-pane @click="get_personal"  label="个人信息" name="first">
           <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading"  style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>

              <div class="panel-body">
      
                <table v-if="userRole==3" class="table table-hover" style="margin-top: 2px">
                  <thead>
                    <tr>
                      <th></th>
                      <th>账户</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>专业系别</th>
                      <th>年龄</th>
                      <th>角色</th>
                
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                       
                      </td>
                      <th scope="row">{{userInfo.ano}}</th>
                      <td>{{userInfo.aname}}</td>
                      <td>{{userInfo.asex}}</td>
                      <td>{{userInfo.adept}}</td>
                      <td>{{userInfo.aage}}</td>
                      <td>{{userInfo.role}}</td>
                   
                    </tr>
                  </tbody>
                </table>
                <table v-if="userRole==2" class="table table-hover" style="margin-top: 2px">
                  <thead>
                    <tr>
                      <th></th>
                      <th>账户</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>年龄</th>
                      <th>专业系别</th>
                      <th>角色</th>
   ``
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                       
                      </td>
                      <th scope="row">{{userInfo.tno}}</th>
                      <td>{{userInfo.tname}}</td>
                      <td>{{userInfo.tsex}}</td>
                      <td>{{userInfo.tage}}</td>
                      <td>{{userInfo.tdept}}</td>
                      <td>{{userInfo.role}}</td>
                
                    </tr>
                  </tbody>
                </table>
                <table v-if="userRole==1" class="table table-hover" style="margin-top: 2px">
                  <thead>
                    <tr>
                      <th></th>
                      <th>学号</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>年龄</th>
                      <th>专业系别</th>
                      <th>角色</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                       
                      </td>
                      <th scope="row">{{userInfo.sno}}</th>
                      <td>{{userInfo.sname}}</td>
                      <td>{{userInfo.ssex}}</td>
                      <td>{{userInfo.sage}}</td>
                      <td>{{userInfo.sdept}}</td>
                      <td>{{userInfo.role}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="userRole==1||3" label="成绩查询" name="secondly">
        <grade  :userRole="userRole"></grade>
        </el-tab-pane>
        <el-tab-pane label="课程信息" name="third">
           <courseList :userRole="userRole"></courseList>
        </el-tab-pane>
        <el-tab-pane  v-if="userRole==3" label="学生信息" name="fourth">
           <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading" @click="getAllStudent" style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>
              <div class="panel-body">
                <form class="form-inline">
                  <div class="row">
      
                   <div class="form-group col-sm-4">
                      <label>学号:</label>
                      <input
                        type="name"
                        class="form-control"
                        id="exampleInputName3"
                        v-model="sno"
                        placeholder="学号"
                      />
                    </div>

                    <div class="col-sm-3">
                      <button type="submit" @click="getByNo(sno)" style="background-color:#409EFF" class="btn btn-primary">
                        搜索
                      </button>
                    </div>
                  </div>
                </form>

                <div class="table-responsive">
                <table class="table table-hover" style="margin-top: 2px">
                    <thead>
                    <tr>
                      <th></th>
                      <th>学号</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>年龄</th>
                      <th>专业系别</th>
                      <th>角色</th>
                      <th>编辑</th>
                      <th>删除</th>
                      <th>新增</th>
                    </tr>
                  </thead>
                  <tbody  v-for="(AllStudent,index) in AllStudent" :key="index">
                    <tr  v-show="!is_edit">
                      <td>
                       
                      </td>
                      <td  scope="row">{{AllStudent.sno}}</td>
                      <td>{{AllStudent.sname}}</td>
                      <td>{{AllStudent.ssex}}</td>
                      <td>{{AllStudent.sage}}</td>
                      <td>{{AllStudent.sdept}}</td>
                      <td>{{AllStudent.role}}</td>
                      <td v-show="!is_edit"><i @click="edit" class="el-icon-edit" style="font-size:25px"></i></td>
                       <td v-show="is_edit"><i class="el-icon-check" style="font-size:25px"></i></td>
                        <td><i @click="sdel(AllStudent.role,AllStudent.sno,null)" class="el-icon-delete" style="font-size:25px"></i></td>
                      <td><i @click="add(AllStudent.role)" class="el-icon-circle-plus" style="font-size:30px"></i></td>
                      
                    </tr>

                    <tr  v-show="is_edit">
                      <td>
                      </td>
                      <td scope="row"><input style="width:50px" class="w-50" type="text" v-model="AllStudent.sno"/></td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="AllStudent.sname"/></td>
                      <td><input style="width:30px" class="w-50" type="text" v-model="AllStudent.ssex"/></td>
                      <td><input style="width:40px" class="w-50" type="text" v-model="AllStudent.sage"/></td>
                      <td><input class="w-50" type="text" v-model="AllStudent.sdept"/></td>
                      <td><input style="width:20px" class="w-50" type="text" v-model="AllStudent.role"/></td>
                      <td  v-show="!is_edit"><i class="el-icon-edit" style="font-size:25px"></i></td>
                      <td v-show="is_edit"><i @click="save(AllStudent)" class="el-icon-check" style="font-size:25px"></i></td>
                    </tr>
                  </tbody>
                </table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane  v-if="userRole==3" label="教师信息" name="fifth">
           <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading" @click="getAllTeacher" style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>

              <div class="panel-body">
                <form class="form-inline">
                  <div class="row">
      
                     <div class="form-group col-sm-4">
                      <label>教师编号:</label>
                      <input
                        type="name"
                        class="form-control"
                        id="exampleInputName3"
                        placeholder="教师编号"
                        v-model="tno"
                      />
                    </div>

                    <div class="col-sm-3">
                      <button type="submit" @click="getByNoT(tno)" style="background-color:#409EFF" class="btn btn-primary">
                        搜索
                      </button>
                    </div>
                  </div>
                </form>

                <div class="table-responsive">
                <table class="table table-hover" style="margin-top: 2px">
                    <thead>
                    <tr>
                      <th></th>
                      <th>教师编号</th>
                      <th>姓名</th>
                      <th>性别</th>
                      <th>年龄</th>
                      <th>专业系别</th>
                      <th>角色</th>
                      <th>编辑</th>
                      <th>删除</th>
                      <th>新增</th>
                    </tr>
                  </thead>
                  <tbody  v-for="(AllTeacher,index) in AllTeacher" :key="index">
                    <tr  v-show="!is_edit">
                      <td>
                    
                      </td>
                      <td  scope="row">{{AllTeacher.tno}}</td>
                      <td>{{AllTeacher.tname}}</td>
                      <td>{{AllTeacher.tsex}}</td>
                      <td>{{AllTeacher.tage}}</td>
                      <td>{{AllTeacher.tdept}}</td>
                      <td>{{AllTeacher.role}}</td>
                      <td v-show="!is_edit"><i @click="edit" class="el-icon-edit" style="font-size:25px"></i></td>
                       <td v-show="is_edit"><i class="el-icon-check" style="font-size:25px"></i></td>
                        <td><i @click="sdel(AllTeacher.role,null,AllTeacher.tno)" class="el-icon-delete" style="font-size:25px"></i></td>
                      <td><i @click="showTeacher=true"  class="el-icon-circle-plus" style="font-size:30px"></i></td>
                      
                    </tr>

                    <tr  v-show="is_edit">
                      <td>
                      </td>
                      <td scope="row"><input style="width:50px" class="w-50" type="text" v-model="AllTeacher.tno"/></td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="AllTeacher.tname"/></td>
                      <td><input style="width:30px" class="w-50" type="text" v-model="AllTeacher.tsex"/></td>
                      <td><input style="width:40px" class="w-50" type="text" v-model="AllTeacher.tage"/></td>
                      <td><input class="w-50" type="text" v-model="AllTeacher.tdept"/></td>
                      <td><input style="width:20px" class="w-50" type="text" v-model="AllTeacher.role"/></td>
                      <td v-show="!is_edit"><i class="el-icon-edit" style="font-size:25px"></i></td>
                      <td v-show="is_edit"><i @click="save_teacher(AllTeacher)" class="el-icon-check" style="font-size:25px"></i></td>
                    </tr>
                  </tbody>
                </table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="userRole==3" label="角色管理" name="sixth">
           <user/>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="seventh">
           <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading" @click="get_personal" style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>
              <div class="table-responsive">
                <table class="table table-hover" style="margin-top: 2px">
                  <thead>
                    <tr>
                      <th></th>
                      <th>用户名</th>
                      <th>账号</th>
                      <th>登录密码</th>
                      <th>用户角色</th>
                      <th>编辑</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr  v-show="!is_edit">
                      <td>
                      </td>
                      <th scope="row">{{username}}</th>
                      <td>{{account}}</td>
                      <td>{{password}}</td>
                      <td>{{userRole}}</td>
                      <td><i v-if="this.userRole!=null" @click="edit" class="el-icon-edit" style="font-size:25px"></i></td>
                
                    </tr>

                    <tr  v-show="is_edit">
                      <td>
                      </td>
                   <th scope="row">{{username}}</th>
                     <td>{{account}}</td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="password"/></td>
                      <td>{{userRole}}</td>
                      <td v-show="!is_edit"><i class="el-icon-edit" style="font-size:25px"></i></td>
                      <td v-show="is_edit"><i @click="save_user(account,password)" class="el-icon-check" style="font-size:25px"></i></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
          <!-- 新增学生弹窗 -->
    <div>
<el-drawer
  title="新增学生"
  :visible.sync="dialog"
  direction="ltr"
  ref="drawer"
  >
<el-form :model="student" label-position="left" label-width="100px" class="demo-ruleForm">
  <el-form-item  >
    <el-form-item label="学号">
    <el-input v-model="student.sno"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="student.sname"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-input v-model="student.ssex"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model.number="student.sage"></el-input>
  </el-form-item>
  <el-form-item label="系别">
    <el-input v-model="student.sdept"></el-input>
  </el-form-item>
  <el-form-item label="角色">
    <el-input v-model.number="student.role"></el-input>
  </el-form-item>
  </el-form-item>
  </el-form>
  <div class="dip">
  <el-button type="primary" @click="submit(student.role)">提交</el-button>
  <el-button @click="clean">重置</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </div>
 
</el-drawer>

    </div>


           <!-- 新增教师弹窗 -->
    <div>
<el-drawer
  title="新增教师"
  :visible.sync="showTeacher"
  direction="ltr"
  ref="drawer"
  >
<el-form :model="teacher" label-position="left" label-width="100px" class="demo-ruleForm">
  <el-form-item  >
    <el-form-item label="编号">
    <el-input v-model="teacher.tno"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="teacher.tname"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-input v-model="teacher.tsex"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model.number="teacher.tage"></el-input>
  </el-form-item>
  <el-form-item label="系别">
    <el-input v-model="teacher.tdept"></el-input>
  </el-form-item>
  <el-form-item label="角色">
    <el-input v-model.number="teacher.role"></el-input>
  </el-form-item>
  </el-form-item>
  </el-form>
  <div class="dip">
  <el-button type="primary" @click="submit(teacher.role)">提交</el-button>
  <el-button @click="clean">重置</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </div>
</el-drawer>
    </div>
     <el-button @click="goOut" type="info">退出登录</el-button>
  </div>
</template>

<script>
import courseList from './courseList.vue';
import user from'./user.vue'
import grade from './grade.vue'
import axios from 'axios'
import { Alert } from 'element-ui';
export default {
  name:'subject',
    components: {
    courseList,
    user,
    grade
   
  },
  data() {
    return {
      name:'',
      is_edit: false,
      username: "张三",
      userRole: "",
      password:'',
      userInfo:{},
      AllStudent:{},
      AllTeacher:{},
      dialog: false,
      showTeacher:false,
      loading: false,
      sno:'',
      tno:'',
      student:{
        sno:"",
        sname:"",
        ssex:"",
        sage:"",
        sdept:"",
        role:""
      },
      teacher:{
        tno:"",
        tname:"",
        tsex:"",
        tage:"",
        tdept:"",
        role:""
      }
    };
  },
  methods: {
    //退出登录
    goOut(){
      //清空token
      window.sessionStorage.clear()
      //跳转到登录页面
      this.$router.push('/')
    },
    //学生搜索框执行函数
    getByNo(sno){
      if(sno.substr(0,1)==1){
             axios({
                url: `http://localhost:81/Students/${this.sno}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllStudent=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
      }
      else{
       alert("信息有误！！！")
      }
        
    },

    //教师搜索框执行函数
    getByNoT(tno){
      console.log("按教师编号查询")
      if(tno.substr(0,1)==2){
         axios({
                url: `http://localhost:81/Teachers/${this.tno}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllTeacher=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
      }else{
     alert("信息有误！！！")
      }
         
    },
    //查询个人信息
    get_personal(){
      console.log("get_personal");
      //发请求获取信息
      if(this.userRole==3){
       axios({
                url: `http://localhost:81/Administrators/${this.account}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data[0])
              if(res.data.length!=0){
                      this.userInfo=res.data[0]
              }
            })
            .catch(err=>{
              console.log(err)
            })
      }else if(this.userRole==2){
        axios({
                url: `http://localhost:81/Teachers/${this.account}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data[0])
              if(res.data.length!=0){
                      this.userInfo=res.data[0]
              }
            })
            .catch(err=>{
              console.log(err)
            })
      }else{
        axios({
                url: `http://localhost:81/Students/${this.account}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data[0])
              if(res.data.length!=0){
                      this.userInfo=res.data[0]
              }
            })
            .catch(err=>{
              console.log(err)
            })
      }
    },
    //查询全部学生信息，管理员权限3
    getAllStudent(){
      console.log("获取全部学生")
      axios({
                url: "http://localhost:81/Students",
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllStudent=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
    },
        //查询全部教师信息，管理员权限3
    getAllTeacher(){
      console.log("获取所有教师信息")
       axios({
                url: "http://localhost:81/Teachers",
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllTeacher=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
    },
    //编辑信息
    edit(){
      console.log("编辑")
       this.is_edit=true;

    },
    //保存编辑的信息，上传到数据库,AllStudent为修改后学生信息
    save(AllStudent){
      console.log("保存修改")
       axios({
                url: "http://localhost:81/Students",
                method: "PUT",
                data:JSON.stringify(AllStudent),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            })
            this.is_edit=false;
    },
    //保存编辑的信息，上传到数据库,AllStudent为修改后学生信息
    save_teacher(AllTeacher){
      console.log("保存教师信息修改")
       axios({
                url: "http://localhost:81/Teachers",
                method: "PUT",
                data:JSON.stringify(AllTeacher),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            })
            this.is_edit=false;
    },
    //删除信息
    sdel(role,sno,tno){
      console.log("删除")
      if(role==1){
           this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios({
                url: "http://localhost:81/Students",
                method: "delete",
                params:{sno}
    })
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getAllStudent()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });          
        });
      }else if(role==2){
           this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios({
                url: "http://localhost:81/Teachers",
                method: "delete",
                params:{tno}
    })
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
          location.reload(); 
          this.getAllStudent()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }

   
      
    },
    //新增
    add(role){
      this.dialog = true
      console.log("新增")
      console.log(this.student)
     
     
    },
    //关闭新增弹窗
    cancelForm() {
      this.dialog = false;
      clearTimeout(this.timer);
    },
    //重置
    clean(){
      console.log("clean")
    },
    //提交新增
    submit(role){
       if(role==1){
        //判断为学生
          axios({
                url: "http://localhost:81/Students",
                method: "POST",
                data:JSON.stringify(this.student),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            }).then(res=>{
              console.log("添加学生成功"+res.data)
               this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.cancelForm()
          this.getAllStudent()
            }).catch(err=>{
              console.log("添加学生失败"+err)
                 this.$message({
            type: 'fail',
            message: '添加失败!'
          });
            })
      }else if(role==2){
        //判断为教师
        axios({
                url: "http://localhost:81/Teachers",
                method: "POST",
                data:JSON.stringify(this.teacher),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            }).then(res=>{
              console.log("添加教师成功"+res.data)
               this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.cancelForm()
          this.getAllTeacher()
            }).catch(err=>{
              console.log("添加教师失败"+err)
                 this.$message({
            type: 'fail',
            message: '添加失败!'
          });
            })
      }
      else{
        alert("角色应该是学生或教师---1");
      }
    },
    //保存用户修改的密码
    save_user(account,password){
      this.$confirm('确认修改密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios({
                url: "http://localhost:81/Users/password",
                method: "PUT",
                params:{account,password}
    })
        this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this. get_personal()
          this.is_edit=false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //页面初始化
    initialization(){
    if(this.userRole==3){
    this.getAllStudent();
    this.getAllTeacher();
    }
    },

  },
  created() {
    this.userRole = this.$route.params.userRole;
    this.username = this.$route.params.username;
    this.account = this.$route.params.account;
     this.password = this.$route.params.password;
    console.log('用户角色为'+this.userRole) 
    this.initialization()
    this.get_personal();
  },
}
</script>

<style lang="css" scoped>
#app {
  width: 100%;
  margin: 0 auto;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.dip{
  display: flex;
  justify-content: space-around;
}
</style>
